<template>
  <div class="page-binduser">
    <pk-dialog style="width: 700px;" title="绑定评委" @confirm="confirm" @onClose="onClose" :loading="loading">
      <div class="mt-48 mb-30 justify-center flex-row">
        <el-transfer v-model="value" :data="data" :titles="['可选', '已选']" filterable @change="handleChange" />
      </div>
    </pk-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { Toast } from '@/utils/utils'
import { userPage, dutiesGetNoBindJudges, dutiesBindJudges } from '@/api/api'
import pkDialog from '@/components/pkui/pk-dialog/pk-dialog.vue'
const emits = defineEmits(['onClose', 'cancel', 'confirm'])
const value = ref([])
const data = ref([])
const props = defineProps({
  curData: {
    type: Object,
    default: () => {}
  }
})
const loading = ref(false)
const confirm = () => {
  if (value.value.length < 1) {
    Toast('绑定评委数量至少选择一个')
    return
  }
  loading.value = true
  dutiesBindJudges({
    id: parseInt(props.curData.id),
    userIdList: value.value
  }).then(res => {
    emits('confirm')
    loading.value = false
  }) 
}

const onClose = () => {
  emits('onClose')
} 

const handleChange = (e) => {
  console.log('---------handleChange----------', e)
}

// 查询未绑定级别评委列表
const getNoBindJudges = () => {
  dutiesGetNoBindJudges({
    pageNum: 1,
    status: 1,
    pageSize: 9999
  }).then(res => {
    data.value = res.resData.map(item => {
      return {
        label: item.username,
        desc: item.username,
        key: item.id,
        value: item.phone
      }
    })
  })
}

onMounted(() => {
  getNoBindJudges()
})
</script>

<style lang="scss" scoped>
::v-deep .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
  font-size: 12px;
}
</style>